require.config({
	paths: {
		echarts: "../bgAll/js/dist"
	}
});
require(["echarts", "echarts/chart/map", "echarts/chart/gauge", "echarts/chart/radar"], function(ec) {
	var myChart = ec.init(document.getElementById("main"));
	var effect = {
		show: true,
		scaleSize: require("zrender/tool/env").canvasSupported ? 1 : 2,
		period: 60,
		color: "#fff",
		shadowColor: "rgba(220,220,220,0.4)",
		shadowBlur: 2
	};

	function itemStyle(idx) {
		return {
			normal: {
				color: "#fff",
				borderWidth: 1,
				borderColor: ["rgba(30,144,255,1)", "lime"][idx],
				lineStyle: {
					type: "solid",
					shadowBlur: 10
				}
			}
		}
	}
	var placeListL1 = [{
		name: "北京",
		geoCoord: [115.413554, 40.911013]
	}, {
		name: "上海",
		geoCoord: [121.480237, 31.236305]
	}, {
		name: "广州",
		geoCoord: [112.2644, 23.1292]
	}, {
		name: "深圳",
		geoCoord: [114.066112, 22.518515]
	}, {
		name: "重庆",
		geoCoord: [106.5516, 29.563]
	}, {
		name: "武汉",
		geoCoord: [114.311831, 30.598428]
	}, {
		name: "西安",
		geoCoord: [108.946306, 34.347436]
	}, {
		name: "成都",
		geoCoord: [104.071216, 30.576279]
	}];
	var placeListL2 = [{
		name: "北京",
		geoCoord: [116.413554, 40.911013]
	}, {
		name: "上海",
		geoCoord: [122.480237, 31.236305]
	}, {
		name: "广州",
		geoCoord: [113.2644, 23.1292]
	}, {
		name: "深圳",
		geoCoord: [115.066112, 22.518515]
	}, {
		name: "重庆",
		geoCoord: [107.5516, 29.563]
	}, {
		name: "武汉",
		geoCoord: [115.311831, 30.598428]
	}, {
		name: "西安",
		geoCoord: [106.946306, 34.347436]
	}, {
		name: "成都",
		geoCoord: [105.071216, 30.576279]
	}];
	var heatData = [
		[116.413554, 39.911013, 0.5742179846391082],
		[117.413554, 39.911013, 0.5742179846391082],
		[121.480237, 31.236305, 0.5742179846391082],
		[113.270793, 23.135308, 0.9742179846391082],
		[111.270793, 23.135308, 0.9742179846391082],
		[114.066112, 22.518515, 0.9742179846391082],
		[107.5516, 29.563, 0.9742179846391082],
		[107.5516, 29.563, 0.9742179846391082],
		[115.311831, 30.598428, 0.5742179846391082],
		[115.311831, 30.598428, 0.5742179846391082],
		[108.946306, 34.347436, 0.5742179846391082],
		[106.946306, 34.347436, 0.5742179846391082],
		[105.071216, 30.576279, 0.9742179846391082],
		[120.161693, 30.280059, 0.9742179846391082],
		[120.161693, 30.280059, 0.9742179846391082]
	];
	var noCDNLine = [
		[{
			name: "北京"
		}, {
			name: "杭州"
		}],
		[{
			name: "上海"
		}, {
			name: "杭州"
		}],
		[{
			name: "广州"
		}, {
			name: "杭州"
		}],
		[{
			name: "深圳"
		}, {
			name: "杭州"
		}],
		[{
			name: "重庆"
		}, {
			name: "杭州"
		}],
		[{
			name: "武汉"
		}, {
			name: "杭州"
		}],
		[{
			name: "西安"
		}, {
			name: "杭州"
		}],
		[{
			name: "成都"
		}, {
			name: "杭州"
		}]
	];
	option = {
		backgroundColor: "transparent",
		title: {
			show: false,
			text: "热力图结合地图",
			x: "center",
			textStyle: {
				color: "white"
			}
		},
		tooltip: {
			trigger: "item",
			formatter: "{b}"
		},
		legend: {
			data: ["L1", "L2"],
			selectedMode: "mu",
			selected: {
				"L1": true,
				"L2": true
			},
			textStyle: {
				color: "#fff"
			}
		},
		series: [{
			name: "L1",
			type: "map",
			mapType: "china",
			roam: true,
			hoverable: false,
			data: [],
			itemStyle: {
				normal: {
					borderColor: "rgba(100,149,237,0.6)",
					borderWidth: 0.5,
					areaStyle: {
						color: "transparent"
					}
				}
			},
			heatmap: {
				minAlpha: 0.8,
				data: heatData
			},
			markLine: {
				smooth: true,
				effect: {
					show: true,
					scaleSize: 1,
					period: 30,
					color: "#fff",
					shadowBlur: 2
				},
				symbol: ["circle", "circle"],
				symbolSize: 1,
				itemStyle: itemStyle(3),
				data: noCDNLine,
			},
			geoCoord: {
				"北京": [116.413554, 39.911013],
				"上海": [121.480237, 31.236305, 121.480237],
				"广州": [113.2644, 23.1292],
				"杭州": [120.161693, 30.280059],
				"四川": [101.082256, 30.65679],
				"重庆": [106.5516, 29.563],
				"深圳": [114.066112, 22.548515],
				"杭州": [120.161693, 30.280059],
				"北京L1": [115.413554, 40.911013],
				"北京L2": [116.413554, 40.911013],
				"济南L1": [36.682785, 117.024967],
				"济南L2": [36.682785, 117.024967],
				"上海L1": [121.480237, 31.236305],
				"上海L2": [121.480237, 31.236305],
				"杭州L1": [120.161693, 30.280059],
				"杭州L2": [120.161693, 30.280059],
				"广州L1": [112.2644, 23.1292],
				"广州L2": [113.2644, 23.1292],
				"武汉": [114.311831, 30.598428],
				"武汉L1": [114.311831, 30.598428],
				"武汉L2": [115.311831, 30.598428],
				"成都": [104.071216, 30.576279],
				"成都L1": [104.071216, 30.576279],
				"成都L2": [105.071216, 30.576279],
				"南京L1": [118.802891, 32.064735],
				"南京L2": [119.802891, 32.064735],
				"西安": [108.946306, 34.347436],
				"西安L1": [106.946306, 34.347436],
				"西安L2": [109.946306, 34.347436],
				"重庆L1": [106.5516, 29.563],
				"重庆L2": [107.5516, 29.563],
				"香港L1": [114.1, 22.2],
				"香港L2": [115.1, 22.2],
				"杭州L1": [120.161693, 30.280059],
				"杭州L2": [121.161693, 30.280059]
			}
		}, {
			name: "L2",
			type: "map",
			mapType: "china",
			roam: true,
			hoverable: false,
			data: []
		}]
	};
	myChart.setOption(option);
	$("#closeCDN").on("click", function() {
		$("#CDNtext").text("请开启");
		$("#bling").removeClass("blingAction");
		$(".tipShow").slideUp();
		clearInterval(L1);
		clearInterval(L1L2);
		myChart.setOption(option, true);
		timeTicketOptionGaugeReset = setInterval(function() {
			var temp = (Math.random() * 100).toFixed(2) - 0;
			if (temp < 50) {
				myChart.setOption({
					series: [{
						heatmap: {
							minAlpha: 0.8
						}
					}]
				});
				$("#bling").addClass("blingAction")
			} else {
				myChart.setOption({
					series: [{
						heatmap: {
							minAlpha: 0.6
						}
					}]
				});
				$("#bling").removeClass("blingAction")
			}
			optionGauge.series[0].data[0].value = temp;
		}, 5000)
	});
	var lastIndex = 0;
	var len = option.series[0].heatmap.data.length;
	timeTicket = setInterval(function() {
		var temp = (Math.random() * 100).toFixed(2) - 0;
		if (temp < 50) {
			myChart.setOption({
				series: [{
					heatmap: {
						minAlpha: 0.8
					}
				}]
			});
			$("#bling").addClass("blingAction")
		} else {
			myChart.setOption({
				series: [{
					heatmap: {
						minAlpha: 0.6
					}
				}]
			});
			$("#bling").removeClass("blingAction");
			$("#startCDN1").removeClass("btnBlingAction")
		}
		optionGauge.series[0].data[0].value = temp;
	}, 12000);
	optionGauge = {
		tooltip: {
			formatter: "{a} <br/>{b} : {c}%"
		},
		toolbox: {
			show: false,
			feature: {
				mark: {
					show: true
				},
				restore: {
					show: true
				},
				saveAsImage: {
					show: true
				}
			}
		},
		series: [{
			name: "",
			type: "gauge",
			center: ["50%", "50%"],
			radius: [0, "100%"],
			startAngle: 180,
			endAngle: 0,
			min: 0,
			max: 100,
			precision: 0,
			splitNumber: 10,
			axisLine: {
				show: true,
				lineStyle: {
					color: [
						[0.25, "#277e71"],
						[0.5, "#277e71"],
						[0.75, "#b56a40"],
						[1, "#b56a40"]
					],
					width: 30
				}
			},
			axisTick: {
				show: true,
				splitNumber: 5,
				length: 8,
				lineStyle: {
					color: "#afcdf5",
					width: 1,
					type: "solid"
				}
			},
			axisLabel: {
				show: true,
				formatter: function(v) {
					switch (v + "") {
						case "10":
							return "";
						case "30":
							return " ";
						case "70":
							return " ";
						case "90":
							return "";
						default:
							return ""
					}
				},
				textStyle: {
					color: "#afcdf5",
					fontSize: 13
				}
			},
			splitLine: {
				show: true,
				length: 30,
				lineStyle: {
					color: "#eee",
					width: 1,
					type: "solid"
				}
			},
			pointer: {
				length: "80%",
				width: 8,
				color: "auto"
			},
			title: {
				show: true,
				offsetCenter: ["0%", 30],
				textStyle: {
					color: "#afcdf5",
					fontSize: 20
				}
			},
			detail: {
				show: false,
				backgroundColor: "rgba(0,0,0,0)",
				borderWidth: 0,
				borderColor: "#ccc",
				width: 100,
				height: 40,
				offsetCenter: ["-30%", 10],
				formatter: "{value}%",
				textStyle: {
					color: "auto",
					fontSize: 20
				}
			},
			data: [{
				value: 50,
				name: "QPS"
			}]
		}]
	};
	timeTicketOptionGauge = setInterval(function() {
		var temp = (Math.random() * 100).toFixed(2) - 0;
		if (temp < 50) {
			myChart.setOption({
				series: [{
					heatmap: {
						minAlpha: 0.8
					}
				}]
			});
			$("#bling").addClass("blingAction")
		} else {
			myChart.setOption({
				series: [{
					heatmap: {
						minAlpha: 0.6
					}
				}]
			});
			$("#bling").removeClass("blingAction")
		}
		optionGauge.series[0].data[0].value = temp;
	}, 10000);
	optionRadar = {
		title: {
			text: "",
			subtext: ""
		},
		tooltip: {
			show: false,
			trigger: "axis"
		},
		legend: {
			orient: "vertical",
			x: "right",
			y: "top",
			textStyle: {
				color: "#b0c4f7"
			},
			data: [" ", "  "]
		},
		calculable: true,
		polar: [{
			name: {
				textStyle: {
					color: "#b0c4f7"
				}
			},
			indicator: [{
				text: "",
				max: 100
			}, {
				text: "",
				max: 100
			}, {
				text: "",
				max: 100
			}, {
				text: "",
				max: 100
			}, {
				text: "",
				max: 100
			}],
			radius: 70,
			axisLine: {
				show: true,
				lineStyle: {
					color: "#3e436d",
					width: 1,
					type: "solid"
				}
			},
			axisLabel: {
				show: false,
				textStyle: {
					color: "#ccc"
				}
			},
			splitArea: {
				show: true,
				areaStyle: {
					color: ["transparent", "#1f2335"]
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					width: 2,
					color: "#3e436d"
				}
			}
		}],
		series: [{
			name: "CDN",
			type: "radar",
			itemStyle: {
				normal: {
					areaStyle: {
						type: "default"
					}
				}
			},
			textStyle: {
				normal: {}
			},
			data: [{
				value: [70, 42, 60, 78, 90],
				name: " "
			}, {
				value: [60, 20, 20, 60, 60],
				name: "  "
			}]
		}]
	};
});